<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<div id="r"></div>
			<div id="y"></div>
			<div id="g"></div>
			<div id="count" class="count"></div>
		</div>
		<script>
			var lamp={
				red:{
					obj:document.getElementById('r'),
					time:30,
					next:'green',
					style:['red','gray','gray']
				},
				yellow:{
					obj:document.getElementById('y'),
					time:5,
					next:'red',
					style:['gray','yeallo','gray']
				},
				green:{
					obj:document.getElementById('g'),
					time:35,
					next:'yellow',
					style:['gray','gray','green']
				},
				change:function(style){
					this.red.obj.background=style[0];
					this.yellow.obj.background=style[1];
					this.green.obj.background=style[2];
				}
			};
			var count={
				obj:document.getElementById('count'),
				change:function(num){
					this.obj.innerHTML=(num<10?'0'+num:num);
				}
			};
			var now=lamp.green;
			count.change(now.time);
			lamp.change(now.style); 
		</script>
	</body>
</html>
